<template>

 <div>
 	<Hearder title="template管理" listName="模板列表"></Hearder>
  <!-- 搜索 -->
   <el-form :inline="true" class="demo-form-inline">
     <el-form-item label="规格名称">
       <el-input v-model="search.name" placeholder="规格名称"></el-input>
     </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getBranList">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="pojo= {} , dialogVisible = true">新建</el-button>
      </el-form-item>
    </el-form>    
<!-- 对话框 -->
<el-dialog :title="pojo.id ? '编辑品牌':'新建品牌'" :visible.sync="dialogVisible"width="35%"> 
  <el-form :inline="false" class="demo-form-inline" label-width="90px">
     <el-form-item label="模板名称">
       <el-input v-model="pojo.name" placeholder="品牌名称">{{pojo.name}}</el-input>
     </el-form-item>
     <el-form-item>
     	<el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
     </el-form-item>
    </el-form>
</el-dialog>
<!-- 数据表单      -->
  <el-table
    :data="tableData"
    style="width: 100%; height: 500px;">
    <el-table-column
      label="Id"
      prop="id">
    </el-table-column>
    <el-table-column
      label="Name"
      prop="name">
    </el-table-column>
    <el-table-column
      label="规格数量"
      prop="specNum">
    </el-table-column>
    <el-table-column
      label="参数数量"
      prop="paraNum">
    </el-table-column>
    <el-table-column
      label="设置"
     >
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="text"
          @click="$router.push('/spec/'+scope.row.id)">规格列表</el-button>
        <el-button
          size="mini"
          type="text"
          @click="$router.push('/para/'+scope.row.id)">参数列表</el-button>
      </template>
    </el-table-column>
    <!-- 操作 -->
    <el-table-column
      align="right">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="text"
          @click="fecthById(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="text"
          @click="deleteById(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页条 -->
    <div>
      <el-pagination layout="total,prev, pager, next,jumper" :total="total" :page-size="pageSize" @current-change="getBranList" @size-change="getBranList" :current-page.sync="currentPage">
      </el-pagination>
    </div>
 </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        search: {
        	name: '',
        },
        pageSize: 5,  
        currentPage: 1,
        total: 30,
        dialogVisible: false,
        pojo: {
        	name: '',
        	specNum: '',
        	paraNum: '',

        },
      }
    },    
    created() {
      this.getBranList();
    
    },
    computed: {

    },
    methods: {
      //获取品牌列表
      async getBranList() {
           const  res =  await this.$http.post(`/api/brand/findPage.do?page=${this.currentPage}&size=${this.pageSize}`,this.search)
           // const  res =  await this.$http.get(`http://localhost:3000/brand?q=${this.search.name}&_page=${this.currentPage}&_limit=${this.pageSize}`)
           
           this.tableData = res.data.rows;
           this.total =  res.data.total;
           console.log(222)           
      },
       // 新建 与编辑
      async save() {
      	// 通过判断id是否为空来发起不同的请求
          const res = await this.$http.post(`/api/brand/${this.pojo.id == null ? 'add' : 'update'}.do`,this.pojo);

          this.dialogVisible = false;
          // 刷新列表
          this.getBranList();
          this.$message({
            type: 'success',
            message: this.id?'修改成功':'保存成功'
          });
      },
      async fecthById(row){
      	  alert(row.id)
          this.dialogVisible = true
          const res = await this.$http.get(`/api/brand/findById.do?id=${row.id}`)
          // const res = await this.$http.get(`http://localhost:3000/brand?id=${row.id}`)

          this.pojo =  res.data;
          console.log(res)
          
          
      },
      async deleteById(row) {
         this.$confirm('是否确定要删除'+row.name+'品牌?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await this.$http.get(`/api/brand/delete.do?id=${row.id}`)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //删除成功 查询获取数据
          this.getBranList()
        })
      }
 
    },
  }
</script>
<style scoped>
  .el-pagination {
    width: 300px;
    margin: 0 auto;
  }

</style>